<!DOCTYPE html>
<html>
<head>
    <title>Folder Upload Example</title>
</head>
<body>
<div id="drop_zone" style="border: 2px dashed #ccc; width: 300px; height: 200px; line-height: 200px; text-align: center;">
    Drag and drop a folder here
</div>

<script>
    const dropZone = document.getElementById('drop_zone');

    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, unhighlight, false);
    });

    function highlight(e) {
        dropZone.classList.add('highlight');
    }

    function unhighlight(e) {
        dropZone.classList.remove('highlight');
    }

    dropZone.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        var dt = e.dataTransfer;
        var files = dt.files;

        // 这里处理文件，但实际上无法直接处理文件夹
        // 如果用户选择了文件夹，某些浏览器会列出文件夹内的文件

        handleFiles(files);
    }

    function handleFiles(files) {
        var formData = new FormData();

        for (var i = 0; i < files.length; i++) {
            formData.append('files[]', files[i]);
            console.log("file",files[i]);
        }

       // 使用fetch或其他AJAX方法发送formData到服务器
        fetch('http://localhost:8080/upload/dd2', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(result => console.log('Success:', result))
            .catch(error => console.error('Error:', error));

       sendhttp(formData);

    }

  function  sendhttp(formData){
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "/upload/upload1", true);

// 设置请求头，如果需要的话（比如Content-Type）
// xhr.setRequestHeader("Content-Type", "multipart/form-data");
// 注意：对于multipart/form-data，通常不需要手动设置Content-Type，因为FormData对象会自动处理

// 发送FormData
      xhr.send(formData);

      xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
              // 请求成功
              var response = JSON.parse(xhr.responseText);
              console.log('Success:', response);
          } else if (xhr.readyState === 4) {
              // 请求完成，但响应状态码不是200
              console.error('Error:', xhr.statusText);
          }
      };

// 也可以添加错误处理，但这通常是通过检查xhr.status来处理的
      xhr.onerror = function () {
          console.error('Network Error');
      };
    }
</script>
</body>
</html>